Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

辞書画面の機能追加(ソート、検索、リスト機能強化) #2411

Open
wants to merge 13 commits into
base: main
Choose a base branch
from

Conversation

kebin628
Copy link
Contributor

@kebin628 kebin628 commented Dec 12, 2024

内容

辞書画面の機能を追加しました。

  • ソート機能(読み&優先度、昇降順切り替え)
  • 単語検索機能
  • 優先度リスト表示機能
  • 変更伴うリストUIの調整

※ Issueにある提案機能の内、インポートエクスポート以外を実装した形になります。

関連 Issue

【提案】読み方&アクセント辞書の機能追加 · Issue #2381 · VOICEVOX/voicevox
#2381

スクリーンショット・動画など

読み順
image

優先度順
image

サブメニュー(優先度切り替え。今後インポート・エクスポートもここに入れる)
image

検索機能
image

その他

ソートのサイズの都合、当初案のUIから多少変更になっています。

リストでの優先度表示はアプリを消しても設定が消えないようにしています。
設定画面で入れるほど大掛かりなものでないので、一時的にローカルストレージに保存できるようになっていればいいなと思って入れていますが、他に良さそうなやり方があればそちらを使います。(OnClickShowPriorityOnDictionary)

@kebin628 kebin628 changed the title Improve/dictionary 辞書画面の機能追加(ソート、検索、リスト機能強化) Dec 12, 2024
@kebin628 kebin628 marked this pull request as ready for review December 12, 2024 02:28
@kebin628 kebin628 requested a review from a team as a code owner December 12, 2024 02:28
@kebin628 kebin628 requested review from Hiroshiba and removed request for a team December 12, 2024 02:28
@Hiroshiba
Copy link
Member

レビューお待たせしてしまってすみません!
型周りでエラーが出ていそうだったのでひとまずコメントまで…!
(不明な点あればなんでもお聞きください🙏)

@kebin628
Copy link
Contributor Author

@Hiroshiba

型周りでエラーが出ていそうだったのでひとまずコメントまで…!

見方があっているか確認ではあるのですが、一緒にエラー出てる117行目と119行目の内容の話であっていますでしょうか?
ここの2行のことであればヒホさんのコードが残っている部分になるのですが、こちら側で手つけたほうが良さそうですかね?

image
image

@Hiroshiba
Copy link
Member

@kebin628 原因の特定までできてないのですが、おそらくこのPRの変更でエラーになったんだと思います!
エラー見るに、filteredUserDictの値がなぜかnumberになるときが増えた…?

@voicevox-preview-pages
Copy link

voicevox-preview-pages bot commented Dec 16, 2024

🚀 プレビュー用ページを作成しました 🚀

更新時点でのコミットハッシュ:ce4a78f

@kebin628
Copy link
Contributor Author

@Hiroshiba

期待する値: number | string | symbol
ビルトインの特別な属性 | Vue.js
https://ja.vuejs.org/api/built-in-special-attributes#key

すみません、該当部分でなく、エラーの本体というかきっかけとしてはv-forの返り値が原因だったようです。
今回の変更でおっしゃるとおりリストの所をfilteredUserDictという別のソートしたリストを返しているので、それの値が影響していたみたいです。
どうも、v-forで回したものがstringかnumberかになるので、使うタイミングでstringにしてやればひとまずは大丈夫そうに見えます。

それと、Mainマージしたらこっち側でエラーが出るようになってしまったため、それの対応も行っています。
発生理由としては、昨日マージした辞書画面の左右分離の影響なようです。

読み方&アクセント辞書ダイアログの右側パネルを別コンポーネントにする by jdkfx · Pull Request #2290 · VOICEVOX/voicevox
#2290

対応内容としては、
新しく作られたDictionaryEditWordDialog.vueに半角→全角調整の変換コードが移動された影響で、メインパネルの検索欄で使用できなくなったため、他の日本語系の処理同様、当該コードを

domain/japanese
https://github.com/VOICEVOX/voicevox/pull/2411/files#diff-c6bf9942ebf63683aedebc287973adfe6b459ec6eb37118d4d6e926e13b72a95R175

に移動しています。

よろしくお願いします。

Copy link
Member

@Hiroshiba Hiroshiba left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

すみません、レビューがとても遅くなりました!!!
あれからnpmpnpmに変わったりしました!
#2512

UIの相談をさせていただきたく・・・ 🙇

ソートUIに関して、issueの提案のようにメニューのボタンにするの良さそうな気がしてたのですがどうでしょうか 👀
別レーンにするのは・・・・・・・横幅が足りないから的な感じですかね?だとしたらさてどう解決したものかって感じですねぇ 😇

こういうUIも良さそうな気がしました。。メニューで「並び方」と「昇順・降順」を切り替えられる感じを想像してます。
image

ただ今どういう並び順なのかの表示がちょっと難しい気もするのですが。。。。
良い解決策が出てない中でのコメントですみません。。。 🙇

@kebin628
Copy link
Contributor Author

kebin628 commented Feb 3, 2025

@Hiroshiba
お久しぶりです

読み順の昇順降順別表記

内部で昇順降順が分離している件については纏める事はできますが、これ今後要素増えたりしないですかね?
要素増えると並び替えパターン*昇順降順で倍々に増えていくので、現PRの「並び替えタイプ&昇順降順切り替え分離」と「Selectに纏める」のどちらが良いのかとは。

とはいえ、今回の場合対象は現状読みと優先度くらいですし、それ以上増える要素もなさそうなので、ここは指摘の通り、対象と昇順降順をマージしてやって

  • 読み順: 昇順
  • 読み順: 降順
  • 優先度順: 昇順
  • 優先度順: 降順
    の4つにする方針も良さそうですね。

今どれにしているかの話については、SelectUIの上に現在の選択状態がそもそも出るので、「↑↓並び替える」でなく、「↑↓読み順: 昇順」で設定内容出すようにしてやれば解決するかなとは(=「並び替える」の文字列は、設定中の値とアイコンから逆読みできるので不要なのでは)

image

メニュー欄の内容

ソートUIに関して、issueの提案のようにメニューのボタンにするの良さそうな気がしてたのですがどうでしょうか 👀
別レーンにするのは・・・・・・・横幅が足りないから的な感じですかね?だとしたらさてどう解決したものかって感じですねぇ 😇
image

幅が割と限界ギリギリですね・・・
現状、全体に対する割合でサイドバーサイズが決められているようで、今のを踏襲すると、ウィンドウサイズによって見栄えが結構変わるのがちょっと困りものだったりしますかね。

読み順がどれに設定されているのかを表示しなくて良いのであれば、アイコンだけで完結できます。
image
ただ、ちょっと追加の文字が浮くので、そこが気がかりというか、気になる所ではありますかね?

image
解決策として、

  • 上の追加の文字を他よろしくアイコンにしてしまい省スペースを図る
  • 下部に追加ボタンを持ってきて上をスッキリさせる(Androidでよく見る右下+とか)
    とかも良さそうですかね。

ひとまず、最後のやつが見栄え的には割とスッキリしてそうなので、この方向も良さそうかなと仮組みしてて感じてました。
かなり好みの違いで色々解法はありそうだなぁとやってて改めて感じてます。

余談

手元の他ソフトでどうしてるか参考資料として置きます。
ボイスピのがボイボとかなり近いですね。

VOICEPEAK
image

A.I.VOICE2
image

CeVIO AI
image

ひとまず詰め切るまで手は動かさないでおきます~

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants